<template>
  <div class="setter-wrap">
    <el-button type="primary" class="save-button" @click="handleSubmit">保存</el-button>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24">
        <el-link type="primary" :underline="false" class="add-button" @click="addCustom">
          <i class="el-icon-circle-plus-outline"></i>
          添加逻辑条件
        </el-link>
      </el-col>
    </el-row>
    <el-table :data="tableData" :border="true"  style="width: 100%">
      <el-table-column label="选择变量" prop="variable">
        <template slot-scope="scope">
          <el-select v-model="scope.row.variable" placeholder="请选择" size="medium">
            <el-option v-for="item in variableList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="表达式" prop="expression">
        <template slot-scope="scope">
          <el-select v-model="scope.row.expression" placeholder="请选择" size="medium" @change="changeExpression(scope.row)">
            <el-option v-for="item in logicJudgeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="判断值" prop="compareValue">
        <template slot-scope="scope">
          <el-select v-model="scope.row.compareValue" placeholder="请选择" size="medium" v-if="scope.row.visible">
            <el-option v-for="item in variableList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {saveOrUpdate, getByBelongNodeId} from '@/api/logicConfig'
import {getByArrangeId} from '@/api/compilationInParameter'
import {constantData} from '@/mock/constant'

export default {
  props: {
    lf: Object,
    context: Object,
    current: Object,
    currentData: Object,
    value: [String, Number, Boolean, Object, Array]
  },
  data() {
    return {
      logicJudgeList: constantData.logicJudgeList,
      variableList: [],
      tableData: [],
      compilationInParameter: {},
    }
  },

  mounted() {
    this.getCompilationInParameter();
    this.getData();
  },

  methods: {
    handleSubmit() {
      const data = {
        arrangeId: window.localStorage.getItem('arrangeId'),
        belongNodeId: this.currentData.id,
        items: this.tableData
      }
      saveOrUpdate(data).then(res =>{
        if (res.code === '0') {
          this.$message.success('保存成功');
        } else {
          this.$message.error('保存失败');
        }
      });
    },

    getCompilationInParameter() {
      getByArrangeId(window.localStorage.getItem('arrangeId')).then(res => {
        if (res.code === '0') {
          this.compilationInParameter = res.data
          this.compilationInParameter.requestParameterList.forEach((item) => {
              const option = {
                label: '请求入参: ' + item.name + '/' + item.code,
                value: item.code
              }
              this.variableList.push(option);
          })
          this.compilationInParameter.queryResponseList.forEach((item) => {
            // 不能把当前节点存档的返回值当做选项作为判断条件
            if (item.belongNodeId !== this.currentData.id) {
              const option = {
                label:  item.nodeName + item.belongNodeId + ':对象' + item.module,
                value: item.belongNodeId
              }
              this.variableList.push(option);
              const columnList = item.columnList;
              columnList.forEach((column) => {
                const columnOption = {
                  label: item.nodeName + item.belongNodeId + ':返回字段'+ column,
                  value: item.belongNodeId + '/' + item.module + "/" + column,
                }
                this.variableList.push(columnOption);
              })
            }
          })
        }
      })
    },

    getData() {
      getByBelongNodeId(this.currentData.id).then(res => {
        if (res.code === '0') {
          this.tableData = res.data.items;
        }
      })
    },

    changeExpression(row) {
      if (row.expression === 'isNull' || row.expression === 'isNotNull') {
        row.visible = false;
        row.compareValue = '';
      } else {
        row.visible = true;
      }
    },

    addCustom() {
      const item = {
        variable: '',
        expression: '',
        compareValue: '',
        visible: true
      }
      this.tableData.push(item)
    }
  }
}
</script>

<style scoped lang="less">
.setter-wrap {
  background: #f3f6fa;
  border-radius: 4px;
  font-size: 12px;
  color: #303a51;
  line-height: 16px;
  font-weight: 400;
  padding: 9px 12px;
}
.label {
  margin-right: 10px;
}
.input {
  width: 90%;
}
.tip {
  color: #a0a1a5;
  margin-top: 8px;
}
.add-button {
  margin-top: 10px;
}
.save-button {
  margin-left: 85%;
}
.el-row {
  height: 35px;
  background-color: #ffffff;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
